<template>
	<div class='project-info-box' :style="'padding-top:'+(barHeight)+'px'">
		<NavBar left-icon="undo-filled" @onLeftIcon="back">
			<template v-slot:center>
				<view class="nav_center">
					<view @click="onLeft" :class="navSelect === 'left' ? 'navActive' : ''">设备列表</view>
					<view @click="onRight" :class="navSelect === 'right' ? 'navActive' : ''">文件资料</view>
				</view>
			</template>
			<template v-slot:right>
				<view @click="addDevice" class="top-right"><uni-icons type="plusempty" size="14"
						color="#fff"></uni-icons>添加</view>
			</template>
		</NavBar>
		<view v-if="navSelect === 'left'" class="container_left">
			<DeviceList :projectId='projectId'></DeviceList>
		</view>
		<view v-if="navSelect === 'right'" class="container_left">
			<FileList ref="fileList" :projectId='projectId'></FileList>
		</view>
		<!-- 新建文件夹 -->
		<view class="create-folder">
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="文件夹名称" placeholder="请输入文件夹名称"
					@confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</div>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api.js'
	import NavBar from '@/components/NavBar.vue'
	import DeviceList from '../device/DeviceList.vue'
	import FileList from './FileList.vue'
	export default {
		components: {
			NavBar,
			DeviceList,
			FileList
		},
		data() {
			return {
				navSelect: 'left',
				projectId: '',
				projectDataEntity: {}, // 项目文件资料
				barHeight: 0
			}
		},
		onLoad(option) {
			this.projectId = option.id
		},
		created() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight + 45;
		},
		methods: {
			back() {
				uni.switchTab({
					url: '/pages/project/ProjectNav'
				})
			},
			onLeft() {
				this.navSelect = "left"
			},
			onRight() {
				this.navSelect = "right"
			},
			addDevice() {
				if (this.navSelect == 'left') {
					uni.navigateTo({
						url: '/pages/project/device/AddDevice?projectId=' + this.projectId
					})
				} else if (this.navSelect == 'right') {
					this.$refs.inputDialog.open()
				}
			},
			// 保存文件夹名称
			dialogInputConfirm(val) {
				if (val == undefined || val == '') {
					return uni.showToast({
						icon: 'error',
						title: '文件夹名称不能为空'
					})
				}
				this.projectDataEntity.type = 0
				this.projectDataEntity.projectId = this.projectId
				this.projectDataEntity.fileTitle = val
				let url = this.projectDataEntity.id ? api.UpdateFolder : api.CreateFolder
				post(url, this.projectDataEntity).then(res => {
					this.navSelect = "right"
					this.$refs.fileList.queryList();
				})
			},
		}
	}
</script>

<style>
	@import '@/static/css/commons.css';
</style>